<template>
  <!-- 1.3.6 消防信息-->
  <div class="ecocrisis mediumtablestyle">
    <div class="main betweenbox">
      <div class="main-right borderStyle colbetweenbox">
        <!-- 1.顶部一行的菜单 -->
        <div class="main-right-menu ">
          <div
            class="item centerbox"
            v-for="(item,index) in oldMenuList"
            :key="index"
            @click="changeMenu(item)"
            :class="{active:item.active}"
            :title="item.name"
            ref="itemName"
          >{{item.name}}</div>
        </div>
        <!-- 4.表格 -->
        <div class="main-right-table tableClass">
          <el-table :data="tableData" style="width: 100%" height="100%" :span-method="firstSpanMethod"  border>
            <el-table-column
              prop="deviceName"
              label="设备名称"
              :show-overflow-tooltip="true"
              width="200"
            ></el-table-column>
            <el-table-column prop="name" label="采集名称" width="400" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="监测值" >
              <template slot-scope="scope">
                <!-- 1 遥测 数值 -->
                <div
                  v-if="scope.row.remoteType=='1'"
                  :class="[scope.row.status=='0' ?'orange0':'',scope.row.status=='1' ?'orange1':'', scope.row.status=='2' ?'orange2':'',scope.row.status=='3' ?'orange3':'',scope.row.status=='4' ?'orange4':'',scope.row.status=='5' ?'orange5':'' ]"
                >
                  <span>{{(scope.row.pointerDict && scope.row.value&&scope.row.pointerDict[Number(scope.row.value)])?(scope.row.pointerDict[Number(scope.row.value)].name):scope.row.value?scope.row.value:'--'}}</span>
                  <span>{{scope.row.unit?scope.row.unit:'' }}</span>
                </div>
                <!-- 2-遥信-状态 3-遥控-开关变位 4-遥调 -->
                <div v-else>
                  <span
                    v-if="scope.row.pointerDict &&scope.row.pointerDict.length>0&&scope.row.pointerDict[Number(scope.row.value)]"
                    :class="{abnormal:scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name.indexOf('警')>-1?true:false:false,orange0:scope.row.status=='0',orange1:scope.row.status=='1',orange2:scope.row.status=='2',orange3:scope.row.status=='3',orange4:scope.row.status=='4',orange5:scope.row.status=='5'}"
                  >{{ scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name:'未知'}}</span>
                  <span v-else>--</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="采集时间" width="160" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.time"
                >{{scope.row.time.substring(0,10)}} {{scope.row.time.substring(11,19)}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { menuListType, tableDataList, objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import _ from "lodash";
import Nodata from "@/components/Nodata/index.vue";
import date from "@/utils/date";
import time from "@/utils/time.js";
import { log } from "three";

interface SpanMethodType {
  row: object;
  column: object;
  rowIndex: number;
  columnIndex: number;
}
@Component({
  components: { Nodata },
})
export default class extends Vue {
  monitorType: string = "";
  // 图表数据状态
  loading2 = false;
  //数据状态
  nodata = false;
  popTitleName: string = "";
  public oldMenuList: any = [
    // {
    //   name: "火灾报警主机",
    //   SBID: "0101",
    //   active: true,
    // },
    // {
    //   name: "声光报警器",
    //   SBID: "0110",
    //   active: false,
    // },
    // {
    //   name: "手动报警器",
    //   SBID: "0102",
    //   active: false,
    // },
    // {
    //   name: "烟感探测器",
    //   SBID: "0109",
    //   active: false,
    // },
    // {
    //   name: "感温线缆",
    //   SBID: "0114",
    //   active: false,
    // },
    // {
    //   name: "烟雾对射",
    //   SBID: "0113",
    //   active: false,
    // },
  ];
  public activeMenu: string = "";
  public oneitemlist: any = [];
  public showOptionStatus: boolean = false;

  // 4.表格数据
   dqData=[]
   stateBtn=1
   spanArr = [];
  get tableData() {
    var menu = this.activeMenu;
    let newdata = this.tableDta;
    let newShuju = [];
    for (var i = 0; i < newdata.length; i++) {
      let current = newdata[i];
      if (current.deviceType === menu) {
        newShuju.push(current);
      }
    }
    if (this.stateBtn==1 && this.dqData &&this.dqData.length>0) {
      newShuju =this.dqData
      this.stateBtn+=1
    }
   let newData={}
    newShuju.map(e=>{
      if(Object.keys(newData).indexOf(''+e.deviceName)===-1){   
        newData[e.deviceName]= []
      }
      newData[e.deviceName].push(e)

    })
  var datas=[]
  for( let k in newData ){
    newData[k].map(i=>{
      datas.push(i)
    })
  }


    let cont = 0;
    let spanArr = [];
    datas.map((v, i) => {
      if (i == 0) {
        spanArr.push(1);
      } else {
        if (v.deviceName == datas[i - 1].deviceName) {
          spanArr[cont] += 1;
          spanArr.push(0);
        } else {
          cont = i;
          spanArr.push(1);
        }
      }
    });
    this.spanArr = spanArr;
    console.log(this.spanArr);
    
    return datas;
  }
  // 1.显示的菜单切换
  changeMenu(item: any) {
    this.oldMenuList.map(i=>{
      i.active=false
    })
    item.active=true
    this.oneitemlist = item;
    this.activeMenu = item.SBID;
  }
    // 根据数组中的对象中的中文字段进行排序 把同样内容的两条对象挨到一起，以备合并单元格所用。
    // localeCampare is not a function
compare(property) {
    return function (a, b) {
      var value1 = a[property];
      var value2 = b[property];
      return value1 - value2;
    };
  }
  // 合并行数
  firstSpanMethod(row, column, rowIndex, columnIndex) {
    // console.log(row);
    
    if (row.columnIndex == 0) {
      console.log(this.spanArr[row.rowIndex]);

      if (this.spanArr[row.rowIndex]) {
        return {
          rowspan: this.spanArr[row.rowIndex],
          colspan: 1,
        };
      } else {
        return {
          rowSpan: 0,
          colspan: 0,
        };
      }
    }
  }

  tableDta: any = [];
  mounted() {
    // console.log("this.$route.query:", this.$route.query);

    let routerIfo = this.$route.query;
    this.init(routerIfo);
  }
  init(routerIfo) {
    let AllAuxiliary = GetSocketModule.getterAllAuxiliaryPointer || [];
    // console.log(AllAuxiliary);
    let newArea = "";
    for (var i = 0; i < AllAuxiliary.length; i++) {
      let item = AllAuxiliary[i];
      if (item.deviceId === routerIfo.deviceId) {
        console.log(item);
        
        newArea = item.area;
        break;
      }
    }
    
    console.log(newArea);
    
    let newData = [];
    AllAuxiliary.forEach((v) => {
      if (v.area === newArea 
      // && v.remoteType === "1" 
      && v.xtValue === "01"
      ) {
        newData.push(v);
      }
    });
    console.log(newData);
    
   if (newData) {
      var arr=[]
        newData.map(v=>{
          var obj:any={}
          obj.name=v.deviceTypeName
          obj.SBID=v.deviceType,
          obj.active=false
          arr.push(obj)
        })
        // console.log(arr);
        var obj2={}
        let peon=arr.reduce((cur,next)=>{
          obj2[next.SBID]?'':obj2[next.SBID]=true &&cur.push(next)
          return cur
        },[])
        if (peon &&peon.length>0 ) {
          peon[0].active=true
          this.oldMenuList=peon
          // 展示当前数据
          var MyData =[]
            newData.map(v=>{
              if (v.deviceType==peon[0].SBID) {
                MyData.push(v)
              }
          })
          this.dqData=MyData
        }
        console.log(peon);
        
    }
    this.tableDta = newData;
    console.log(this.tableDta);
  }
}
</script>

<style lang="scss" scoped>
.ecocrisis {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    &-name {
      width: 10rem;
      font-size: 0.2rem;
      font-weight: 400;
      color: rgba(118, 238, 250, 1);
    }
    &-back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
    &-center {
      width: 10rem;
      height: 100%;
      margin: 0 0.2rem;
      padding: 0.2rem;
    }
    .tableClass {
      height: 6rem;
      display: flex;
      justify-content: space-between;
      .middleRight {
        .linechart {
          width: 100%;
          height: calc(100% - 0.27rem);
          > div {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    &-right {
      width: 100%;
      height: 100%;
      &-menu {
        width: 100%;
        height: 0.32rem;
        display: flex;
        overflow-x: auto;
        .item {
          // flex: 1;
          // width: 1.6rem;
          padding: 0 0.2rem;
          height: 0.32rem;
          font-size: 0.2rem;
          border: 1px solid #05b4ff;
          background-color: transparent;
          cursor: pointer;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .itemslh {
          width: 0.4rem;
          padding: 0 0.2rem;
          height: 0.32rem;
          font-size: 0.2rem;
          border: 1px solid #05b4ff;
          background-color: transparent;
          cursor: pointer;
        }
        .item:hover,
        .itemslh:hover {
          background-color: #234d74;
        }
        .active {
          border: 1px solid rgba(22, 100, 201, 1);
          background: linear-gradient(
            180deg,
            rgba(6, 86, 238, 1) 0%,
            rgba(6, 88, 241, 1) 34%,
            rgba(3, 44, 121, 1) 100%
          );
        }
        .option {
          position: absolute;
          right: 0;
          top: 0.32rem;
          width: 35%;
          z-index: 11;
          .item {
            width: 100%;
            height: 0.32rem;
            font-size: 0.2rem;
            border: 1px solid #05b4ff;
            background-color: transparent;
            cursor: pointer;
          }
          .item:hover {
            background-color: #234d74;
          }
        }
      }
      &-collapse {
        width: 100%;
        height: 2rem;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .icon {
          position: absolute;
          top: 50%;
          z-index: 98;
          color: #36b0eb;
          padding: 0.1rem;
          font-size: 0.2rem;
          cursor: pointer;
        }
        .icon-left {
          left: 2%;
          transform: rotate(180deg);
        }
        .icon-right {
          right: 2%;
        }
        .icons {
          color: #ccc;
        }
        .icons2 {
          color: #ccc;
        }
        .tans {
          position: absolute;
          width: 100%;
          height: 100%;
          transition: all 0.6s;
          top: 0;
        }
        .right-top-rotation {
          height: 100%;
          width: calc(100% - 0.8rem);
          margin: 0 0.4rem;
          overflow: hidden;
          position: relative;
          white-space: nowrap;
          .rotation-img {
            height: 100%;
            width: 33.3%;
            display: inline-block;
            position: relative;
            cursor: pointer;
            .bg-out {
              // width: 1.86rem;
              height: 1.88rem;
              background: url("../../../../assets/img/AuxiliaryMonitor/txzt-x.png")
                no-repeat center center;
            }
            .rotation-text {
              position: absolute;
              width: 100%;
              left: 50%;
              top: 85%;
              transform: translateX(-50%);
              cursor: pointer;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.14rem;
            }
          }
          .rotation-img:hover {
            .bg-in {
              transform: scale(1.1);
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.16rem;
            }
          }
          .visited {
            .bg-in {
              transform: scale(1.1);
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.18rem;
              color: #1ab2ff;
            }
          }
        }
      }
      &-cylinder {
        width: 100%;
        height: 1.5rem;
        margin: 0.1rem auto;
        padding: 0 0.1rem;
        box-sizing: border-box;
        > div {
          width: 1.2rem;
          height: 100%;
          position: relative;
          img {
            width: 100%;
          }
          .number {
            position: absolute;
            top: 0.2rem;
            left: 0;
            width: 100%;
            font-family: "numfont";
            font-size: 0.24rem;
            text-align: center;
          }
          .blue {
            color: rgba(3, 189, 254, 1);
          }
          .green {
            color: rgba(14, 252, 158, 1);
          }
          .yellow {
            color: rgba(254, 159, 55, 1);
          }
          .text {
            width: 100%;
            text-align: center;
          }
        }
      }
      &-table {
        width: 100%;
        height: calc(100% - 4.2rem);
        margin: 0.1rem auto;
        box-sizing: border-box;
        .iconClick {
          display: inline-block;
          width: 0.42rem;
          height: 0.2rem;
          background: url(../../../../assets/img/OnlineMonitor/cli_qx.png)
            no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
        .iconClick:hover {
          background: url(../../../../assets/img/OnlineMonitor/nor_qx.png)
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
.ecocrisis {
  .el-carousel__arrow--left,
  .el-carousel__arrow--right {
    background-color: transparent;
  }
  .el-button--text .el-btn-icon {
    font-size: 0.22rem;
  }
  .main-right-table .el-button--text.is-disabled {
    color: #ccc;
    border-color: transparent;
    height: 5rem;
  }
  .el-table .cell .abnormal {
    color: rgba(246, 91, 55, 1);
  }
}
</style>

